<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>运营统计</title>
    <link rel="stylesheet" href="src/css/chushi.css">
    <link rel="stylesheet" href="src/css/index.css">
    <link rel="stylesheet" href="src/css/iview.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_493666_1yyiv9acz14.css">
</head>

<body>
    <div class="wrap" id="app">
        <div class="warptwo">
            <div class="nav_wrap">
                <div class="nav">
                    <div class="nav-top">
                        <div class="menus" v-for="item of menusTitle">
                            <h5>{{item.title}}</h5>
                            <div class="menus-item">
                                <div class="messages" v-for="its of item.messages">
                                    <input type="checkbox"> {{its.message}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nav-button iconfont icon-search">
                        查询
                    </div>
                </div>
            </div>
            <div class="main1">
                <div class="main1_top">
                    <i class="iconfont icon-information"></i>
                    基础数据
                    <i class="iconfont icon-circle-down" @click="handerTableData"></i>
                </div>
                <div class="main1_bottom" :class="classed">
                    <i-table stripe :columns="columns1" :data="data1"></i-table>
                </div>
                <div>
                    <div class="main1_pho">
                        <div id="photo1" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
                <div>
                    <div class="main1_pho">
                        <div id="photo2" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <div class="main2">
                <div class="main1_top">
                    <i class="iconfont icon-people-manage"></i>
                    人员管理
                    <i class="iconfont icon-circle-down" @click="handerTableData2(main1_bottom)"></i>
                </div>
                <div class="main1_bottom" :class="classed2">
                    <i-table stripe :columns="columns1" :data="data2"></i-table>
                </div>
                <div>
                    <div class="main1_pho main2_pho">
                        <div id="photo3" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <div class="main3">
                <div class="main1_top">
                    <i class="main3_i iconfont icon-efficacy"></i>
                    人均效能
                    <i class="iconfont icon-circle-down" @click="handerTableData3"></i>
                </div>
                <div class="main1_bottom" :class="classed3">
                    <i-table stripe :columns="columns1" :data="data3"></i-table>
                </div>
                <div>
                    <div class="main1_pho main2_pho">
                        <div id="photo4" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
                <div>
                    <div class="main1_pho main2_pho">
                        <div id="photo5" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <div class="main4">
                <div class="main1_top">
                    <i class="main3_i iconfont icon-logistics-costs"></i>
                    物流成本
                    <i class="iconfont icon-circle-down" @click="handerTableData4"></i>
                </div>
                <div class="main1_bottom" :class="classed4">
                    <i-table stripe :columns="columns1" :data="data4"></i-table>
                </div>
                <div>
                    <div class="main1_pho main2_pho">
                        <div id="photo6" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
                <div>
                    <div class="main1_pho">
                        <div id="photo7" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="src/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="src/js/iview.min.js"></script>
    <script src="src/js/echarts.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                menusTitle: [],
                data1: [],
                data2: [],
                data3: [],
                data4: [],
                datas1: [],
                columns1: [],
                classed: '',
                classed2: '',
                classed3: '',
                classed4: ''
            },
            methods: {
                getAllEchaarts() {

                    let myChart1 = echarts.init(document.getElementById('photo1'));
                    let myChart2 = echarts.init(document.getElementById('photo2'));
                    let myChart3 = echarts.init(document.getElementById('photo3'));
                    let myChart4 = echarts.init(document.getElementById('photo4'));
                    let myChart5 = echarts.init(document.getElementById('photo5'));
                    let myChart6 = echarts.init(document.getElementById('photo6'));
                    let myChart7 = echarts.init(document.getElementById('photo7'));
                    let option1 = {
                        title: {
                            text: '出库总金额（单位：亿元）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '16px'
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: {
                            max: 1.00,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        },
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [0.20, 0.40, 0.60, 0.24, 0.29, 0.2, 0.24, 0.3, 0.24, 0.29, 0.2, 0.24, 0.29],
                            barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (params.value > 0.5) {
                                            return "#FF7101";
                                        }
                                        return '#FBA663';
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: this.data,
                                        color: '#FBA663'
                                    }
                                }
                            }
                        }]
                    };
                  
                    let option2 = {
                        title: {
                            text: '三方收入（万元）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '16px'
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: {
                            max: 10.00,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        },
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [2, 4, 1.6, 2, 2, 1.8, 2, 3, 2.5, 2, 6.2, 2.2, 2],
                            barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (params.value > 4) {
                                            return "#01AAEB";
                                        }
                                        return '#62C8F0';
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: this.data,
                                        color: '#62C8F0'
                                    }
                                }
                            }
                        }]
                    };

                    let option3 = {
                        title: {
                            text: '各公司人员比率',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '16px'
                            }
                        },
                        legend: {
                            icon: 'rect',
                            data: ['物流中心总人数', '仓储部人数', '运输部人数', '人员流动率', '人员离职率'],
                            x: 'center',
                            y: 'bottom',
                        },
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: [{
                            type: 'value',
                            scale: true,
                            max: 50.00,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        },
                        {
                            type: 'value',
                            scale: true,
                            max: 0.5,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        }],
                        series: [
                            {
                                name: '物流中心总人数',
                                type: 'bar',
                                data: [9, 30, 20, 10, 20, 30, 42, 30, 20, 10, 20, 30, 15],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#01AAEB";
                                            }
                                            return '#62C8F0';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#62C8F0'
                                        }
                                    }
                                }
                            },
                            {
                                name: '仓储部人数',
                                type: 'bar',
                                data: [20, 37, 45, 33, 26, 10, 29, 30, 15, 40, 30, 20, 10],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#FF7302";
                                            }
                                            return '#FBA663';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#FBA663'
                                        }
                                    }
                                }
                            },
                            {
                                name: '运输部人数',
                                type: 'bar',
                                data: [40, 30, 25, 12, 10, 20, 30, 15, 20, 30, 40, 30, 20],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#FED000";
                                            }
                                            return '#FED000';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#FED000'
                                        }
                                    }
                                }
                            },
                            {
                                yAxisIndex: 1,
                                name: '人员流动率',
                                type: 'line',
                                data: [0.4, 0.03, 0.025, 0.12, 0.1, 0.02, 0.03, 0.15, 0.02, 0.3, 0.04, 0.03, 0.2],
                                itemStyle: {
                                    normal: {
                                        color: '#0069B7'
                                    }
                                }
                            },
                            {
                                yAxisIndex: 1,
                                name: '人员离职率',
                                type: 'line',
                                data: [0.12, 0.1, 0.02, 0.03, 0.15, 0.025, 0.12, 0.1, 0.03, 0.15, 0.02, 0.03],
                                itemStyle: {
                                    normal: {
                                        color: '#C70412'
                                    }
                                }
                            }
                        ]
                    };
          

                    let option4 = {
                        title: {
                            text: '日人均效能比（件）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '18px'
                            }
                        },
                        legend: {
                            icon: 'rect',
                            data: ['日人均卸货件数', '日人均收货件数', '整件日人均拣货件数', '拆零日人均拣货条目数', '内复核日人均复核条目数', '外复核日人均复核件数', '日人均装车件数'],
                            x: 'center',
                            y: 'bottom',
                        },
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: [
                            {
                                type: 'value',
                                max: 4000.00,
                                min: 0,
                                axisLabel: {
                                    formatter: function () {
                                        return "";
                                    }
                                },
                                axisLine: { show: false },
                                axisTick: { show: false },
                                splitLine: { show: false }
                            }],
                        series: [
                            {
                                name: '日人均卸货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [739, 1132, 996, 500, 230, 310, 420, 305, 255, 288, 288, 388, 1500],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            return '#6FCCD4';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '日人均收货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [900, 420, 305, 365, 258, 300, 420, 420, 305, 255, 880, 300, 350],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#F2B062';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '整件日人均拣货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [400, 300, 300, 360, 280, 380, 420, 300, 200, 280, 380, 300, 268],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#C2C2C2';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '拆零日人均拣货条目数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [900, 300, 200, 266, 360, 300, 420, 300, 200, 1000, 300, 300, 560],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#FCDE62';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '内复核日人均复核条目数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [900, 300, 200, 500, 200, 300, 420, 300, 200, 300, 200, 300, 450],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#61C2ED';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '外复核日人均复核件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [500, 300, 200, 400, 200, 300, 420, 300, 400, 488, 200, 300, 650],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#8CCC82';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '日人均装车件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [400, 300, 200, 400, 800, 300, 420, 300, 1299, 444, 200, 300, 688],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 1200) {
                                                return "#0168B7";
                                            }
                                            return '#62A0D1';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            }
                        ]
                    };

                    let option5 = {
                        title: {
                            text: '日各公司作业人员数量（人）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '18px'
                            }
                        },
                        legend: {
                            icon: 'rect',
                            data: ['日人均卸货件数', '日人均收货件数', '整件日人均拣货件数', '拆零日人均拣货条目数', '内复核日人均复核条目数', '外复核日人均复核件数', '日人均装车件数'],
                            x: 'center',
                            y: 'bottom',
                        },
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: [
                            {
                                type: 'value',
                                max: 120.00,
                                min: 0,
                                axisLabel: {
                                    formatter: function () {
                                        return "";
                                    }
                                },
                                axisLine: { show: false },
                                axisTick: { show: false },
                                splitLine: { show: false }
                            }],
                        series: [
                            {
                                name: '日人均卸货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [7, 11, 9, 5, 23, 31, 42, 35, 25, 28, 28, 38, 5],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            return '#6FCCD4';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '日人均收货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [9, 42, 6, 6, 25, 30, 42, 40, 30, 25, 8, 13, 15],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#F2B062';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '整件日人均拣货件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [20, 10, 30, 36, 28, 8, 8, 15, 20, 28, 38, 30, 28],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#C2C2C2';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '拆零日人均拣货条目数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [30, 30, 20, 26, 36, 30, 8, 8, 8, 10, 9, 9, 15],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#FCDE62';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '内复核日人均复核条目数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [9, 8, 10, 11, 11, 11, 11, 11, 11, 11, 11, 11, 10],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#61C2ED';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '外复核日人均复核件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [6, 8, 28, 8, 10, 10, 10, 10, 10, 10, 10, 10, 10],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            // if (params.value > 40) {
                                            //     return "#01AAEB";
                                            // }
                                            return '#8CCC82';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            },
                            {
                                name: '日人均装车件数',
                                type: 'bar',
                                stack: 'pho4',
                                data: [6, 8, 28, 8, 10, 10, 10, 10, 10, 10, 10, 10, 10],
                                barWidth: '40%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 1200) {
                                                return "#0168B7";
                                            }
                                            return '#62A0D1';
                                        },
                                        label: {
                                            show: true,
                                            x: 'center',
                                            formatter: this.data,
                                            color: '#E7E7E7',
                                            fontSize: '10px'
                                        }
                                    }
                                }
                            }
                        ]
                    };
                    let option6 = {
                        title: {
                            text: '直接物流成本（万元）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '16px'
                            }
                        },
                        legend: {
                            icon: 'rect',
                            data: ['仓储部直接物流成本（万元）', '运输部直接物流成本（万元）', '物流部直接物流成本（万元）', '直接物流成本（万元）'],
                            x: 'center',
                            y: 'bottom',
                        },
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: [{
                            type: 'value',
                            scale: true,
                            max: 200.00,
                            min: 0,
                            interval: 40,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        },
                        {
                            type: 'value',
                            scale: true,
                            max: 250,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        }],
                        series: [
                            {
                                name: '仓储部直接物流成本（万元）',
                                type: 'bar',
                                data: [90, 30, 120, 100, 120, 30, 42, 30, 120, 110, 40, 130, 115],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#01AAEB";
                                            }
                                            return '#62C8F0';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#62C8F0'
                                        }
                                    }
                                }
                            },
                            {
                                name: '运输部直接物流成本（万元）',
                                type: 'bar',
                                data: [100, 37, 145, 133, 126, 100, 129, 130, 150, 140, 30, 120, 150],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#FF7302";
                                            }
                                            return '#FBA663';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#FBA663'
                                        }
                                    }
                                }
                            },
                            {
                                name: '物流部直接物流成本（万元）',
                                type: 'bar',
                                data: [50, 130, 125, 112, 110, 120, 130, 115, 120, 130, 40, 130, 120],
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            if (params.value > 40) {
                                                return "#FED000";
                                            }
                                            return '#FED000';
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: this.data,
                                            color: '#FED000'
                                        }
                                    }
                                }
                            },
                            {
                                yAxisIndex: 1,
                                name: '直接物流成本（万元）',
                                type: 'line',
                                data: [12, 100, 200, 130, 150, 25, 120, 100, 100, 50, 30, 60, 88],
                                itemStyle: {
                                    normal: {
                                        color: '#C70412'
                                    }
                                }
                            }
                        ]
                    };
                    let option7 = {
                        title: {
                            text: '出库总金额（单位：亿元）',
                            x: 'center',
                            textStyle: {
                                color: 'rgb(0, 170, 232)',
                                fontSize: '16px'
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: '#C8C8C8'
                                }
                            },
                            axisLabel: {
                                color: '#000'
                            },
                            data: [
                                '武汉公司', '十堰公司', '孝感公司', '咸宁公司', '黄冈公司', '荆州公司', '襄樊公司', '恩施公司', '天门公司', '随州公司', '黄石公司', '仙桃公司', '鄂州公司'
                            ]
                        },
                        yAxis: {
                            max: 120.00,
                            min: 0,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                lineStyle: {
                                    color: '#E1E1E1'
                                }
                            }
                        },
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [20, 40, 60, 24, 29, 2, 24, 3, 24, 29, 2, 24, 29],
                            barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (params.value > 50) {
                                            return "#FF7101";
                                        }
                                        return '#FBA663';
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: this.data,
                                        color: '#FBA663'
                                    }
                                }
                            }
                        }]
                    };

                   
                    myChart1.setOption(option1);
                    myChart2.setOption(option2);
                    myChart3.setOption(option3);
                    myChart4.setOption(option4);
                    myChart5.setOption(option5);
                    myChart6.setOption(option6);
                    myChart7.setOption(option7);
                    window.onresize = () => {
                        myChart1.resize();
                        myChart2.resize();
                        myChart3.resize();
                        myChart4.resize();
                        myChart5.resize();
                        myChart6.resize();
                        myChart7.resize();
                    }
                },    

                getNavInfo() {
                    axios.get('static/nav.json').then(
                        (res) => {
                            res = res.data;
                            if (res) {
                                const data = res;
                                this.menusTitle = data.menusTitle;
                            }
                        }
                    )
                },
                getMain1Info() {
                    axios.get('static/main_table.json').then(this.getMain1InfoSucc)
                },
                getMain1InfoSucc(res) {
                    if (res.data) {
                        const data = res.data;
                        this.data1 = data.data1;
                        this.data2 = data.data2;
                        this.data3 = data.data3;
                        this.data4 = data.data4;
                        this.columns1 = data.columns1;
                    }
                },

                handerTableData() {
                    // for(let i in data1){
                    //     this.datas1[i]=this.datas1[i];
                    // }
                    // this.change_data1='datas1'
                    // if(!this.classed){
                    //     this.classed='classed';
                    //     // this.$refs.main1_table
                    // }
                    this.classed = !this.classed ? 'classed' : ''
                },

                handerTableData2() {
                    this.classed2 = !this.classed2 ? 'classed' : ''
                },
                handerTableData3() {
                    this.classed3 = !this.classed3 ? 'classed' : ''
                },
                handerTableData4() {
                    this.classed4 = !this.classed4 ? 'classed' : ''
                }
            },
            mounted() {
                this.getNavInfo();
                this.getMain1Info();
                this.getAllEchaarts();
            }
        })
    </script>
</body>

</html>